<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>用户注册 - 【{$site_info.site_name}】</title>
<link rel="icon name" href="{$site_info.site_icon}">
<link rel="stylesheet" href="__CBTCSS__/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/login/register.css">
</head>

<body>

<form class="form-signin">
  <div class="text-center mb-4">
    <a href="/"><img class="mb-4" src="/static/img/logo.png" alt="" width="82" height="82"></a>
    <h1 class="h3 mb-3 font-weight-normal">{$site_info.site_name}</h1>
    <p>用户注册</p>
  </div>

  <div class="form-label-group" id="uname">
    <input type="text" id="inputUname" class="form-control" placeholder="用户名" name="uname" v-model.lazy='uname' data-toggle="popover" data-trigger="manual" v-bind:data-content="tip" required autofocus>
    <label for="inputUname">用户名</label>
  </div>
  <div class="form-label-group" id="unick">
    <input type="text" id="inputUnick" class="form-control" placeholder="昵称" name="unick" v-model.lazy='unick' data-toggle="popover" data-trigger="manual" v-bind:data-content="tip">
    <label for="inputUnick">昵称</label>
  </div>
  <div class="form-label-group">
    <input type="text" class="form-control" placeholder="密码" name="upass" data-toggle="popover" data-trigger="manual" data-content="密码格式为2-16位的字母数字下划线">
    <label>密码</label>
  </div>
  <div class="form-label-group">
    <input type="text" class="form-control" placeholder="邮箱【选填】" name="email_name" data-toggle="popover" data-trigger="manual" data-content="【选填】如果填写邮箱则必须进行验证">
    <label>邮箱【选填】</label>
  </div>
  <div class="form-label-group">
    <div class="input-group" style="height:50px;">
      <input type="text" class="form-control" name="email_captcha" placeholder="邮件验证码" style="height:100%;">
      <div class="input-group-append">
        <button class="btn btn-outline-info" type="button" id="send_mycaptcha" onclick="send_captcha()">发送</button>
      </div>
    </div>
    <label>邮件验证码</label>
  </div>

  {if $captcha!='0'}
  <div class="card mb-2">
    {if $captcha=='1'}
      {:captcha_img('verify_math')}
    {else /}
      {:captcha_img('verify_zh')}
    {/if}
    <div class="card-body p-0">
      <input type="text" class="form-control" placeholder="验证码" name="captcha">
    </div>
  </div>
  {/if}

  <button class="btn btn-lg btn-primary btn-block" type="button" onclick="register()">注册</button>
  <div class="checkbox my-3">
    <label class="float-right font-weight-lighter">
      <a href="{:url('login/login')}">已有账号？去登录</a>
    </label>
  </div>
  <p class="my-5 text-muted text-center d-block">Copyright © 2019-2020 {$site_info.site_name}</p>
</form>





</body>
<script src="__CBTCSS__/jquery/3.4.1/jquery.min.js"></script>
<script src="__CBTCSS__/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="__CBTCSS__/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="__CBTCSS__/vue/2.6.11/vue.min.js"></script>
<link rel="stylesheet" href="/static/main/jqueryMy/css/jquery.my-message.1.1.css" />
<script type="text/javascript" src="/static/main/jqueryMy/js/jquery.my-message.1.1.js"></script>
<script>
// ***************提示浮动框***************
var message = new MyMessage.message({
  /*默认参数，下面为默认项*/
  iconFontSize: "32px",    //图标大小,默认为20px
  messageFontSize: "24px", //信息字体大小,默认为12px
  showTime: 4000,          //消失时间,默认为3000
  align: "center",         //显示的位置类型center,right,left
  positions: {             //放置信息距离周边的距离,默认为10px
    top:   "20px",
    bottom:"10px",
    right: "10px",
    left:  "10px",
  },
});





// ***************用户名验证***************
var uname = new Vue({
  el: '#uname',
  data: {
    uname: '',
    tip: '用户名只能为大小写字母'
  },
  methods: {
    checkName: function(uname) {
      var that = this;
      $.post("{:url('login/checkName')}",
      {
          uname: uname,
      },
      function(data,status){
        if(data.state=='success'){
          that.tip = data.info;
          $("#inputUname").popover('hide');
          $("#inputUname").popover('show');
        }else{
          that.tip = data.info;
          $("#inputUname").popover('hide');
          $("#inputUname").popover('show');
        }
      });
    }
  },
  watch: {
    uname: function(val) {
      this.checkName(val);
      this.tip = '正在验证用户名...';
      $("#inputUname").popover('hide');
      $("#inputUname").popover('show');
    }
  }
});
// ***************用户昵称验证***************
var unick = new Vue({
  el: '#unick',
  data: {
    unick: '',
    tip: '昵称只能为汉字'
  },
  methods: {
    checkNick: function(unick) {
      var that = this;
      $.post("{:url('login/checkNick')}",
      {
          unick: unick,
      },
      function(data,status){
        if(data.state=='success'){
          that.tip = data.info;
          $("#inputUnick").popover('hide');
          $("#inputUnick").popover('show');
        }else{
          that.tip = data.info;
          $("#inputUnick").popover('hide');
          $("#inputUnick").popover('show');
        }
      });
    }
  },
  watch: {
    unick: function(val) {
      this.checkNick(val);
      this.tip = '正在验证昵称...';
      $("#inputUnick").popover('hide');
      $("#inputUnick").popover('show');
    }
  }
});





// ***************选框点击提示***************
$("#inputUname").click(function(event) {
  $("#inputUname").popover('show');
});
$("#inputUnick").click(function(event) {
  $("#inputUnick").popover('show');
});
$("input[name='upass']").click(function(event) {
  $("input[name='upass']").popover('show');
});
$("input[name='email_name']").click(function(event) {
  $("input[name='email_name']").popover('show');
});





// ***************发送邮件验证码***************
function send_captcha(){
  $email = $("input[name='email_name']").val();
   if($email != ''){
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
    if(!reg.test($email)){
      message.add("邮箱格式不正确，请重新填写!","error");
      return false;
    }
  }else{
    message.add("邮箱不能为空","error");
    return false;
  }
  $btn_html = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>发送中';
  $("#send_mycaptcha").html($btn_html);
  $.post("/login/send_register_email_captcha",
  {
    email : $email,
  },
  function(data,status){
    if(data.state == 'success'){
      var i = 25;
      function wait() {
        if (i > 0) {
          i--;
          $("#send_mycaptcha").attr('disabled',true);
          $("#send_mycaptcha").html('已发送(' + i + ')');
        } else {
          clearInterval(iCount);
          $("#send_mycaptcha").attr('disabled',false);
          $("#send_mycaptcha").html('发送');
        }
      }
      var iCount = setInterval(wait, 1000);
    }else{
      $("#send_mycaptcha").html('发送');
      message.add(data.info,"warning");
    }
  });
}





// ***************提交注册信息***************
function register(){
  // 获取要提交的信息
  $uname = $("input[name='uname']").val();
  $unick = $("input[name='unick']").val();
  $upass = $("input[name='upass']").val();
  $ename = $("input[name='email_name']").val();
  $ecapt = $("input[name='email_captcha']").val();
  $captc = $("input[name='captcha']").val();
  if(!$captc){
    $captc = '';
  }
  // 注册信息提交
  $.post("{:url('login/register')}",
  {
    uname : $uname,
    unick : $unick,
    upass : $upass,
    ename : $ename,
    ecapt : $ecapt,
    captc : $captc,
  },
  function(data,status){
    if(data.state=='success'){
      message.add(data.info,'success');
      setTimeout(function(){window.location.href="{:url('login/login')}"},1500);
    }else{
      var info = data['info'];
      for( var key in info ){
        message.add(info[key],'warning');
      }
    }
  });
}
</script>
</html>